<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.html">
	<link href='css/fullcalendar.css' rel='stylesheet'/>
	<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'/>
	<style>
	  body {
	    margin: 40px 10px;
	    padding: 0;
	    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	    font-size: 14px;
	  }
			
	  #calendar {
	    max-width: 900px;
	    margin: 0 auto;
	  }
			
	  #box {
	    display: none;
	  }
			
	  .form-inline {
	    padding: 20px;
	  }
			
	  
			
	  .label-success {
	    background-color: #82af6f;
	  }
			
	  .label-danger {
	    background-color: #d15b47;
	  }
	</style>
	<script src='js/jquery-1.8.3.min.js'></script>
	<script src='js/moment.min.js'></script>
	<script src='js/fullcalendar.js'></script>
	<script src="js/locale/zh-cn.js"></script>
	<script src="layer/layer.js"></script>

    <title>Profile</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <div id="header">

      </div>
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row">
                  <aside class="profile-nav col-lg-3">
                      <section class="panel">
                          <div class="user-heading round">
                              <a href="#">
                                  <img src="img/profile-avatar.jpg" alt="">
                              </a>
                              <h1>理论</h1>
                              <p>jsmith@flatlab.com</p>
                          </div>

                          <ul class="nav nav-pills nav-stacked">
                              <li><a href="userInfo.html"> <i class="icon-user"></i> 基本信息</a></li>
                              <li><a href="userInfoModify.html"> <i class="icon-calendar"></i> 修改信息</a></li>
                              <li><a href="userPwdModify.html"> <i class="icon-edit"></i>密码修改</a></li>
							  <li class="active"><a href="userInfoPaiban.html"> <i class="icon-edit"></i>查看本月排班</a></li>

                          </ul>

                      </section>
                  </aside>
                  <aside class="profile-info col-lg-9">
                      <section class="panel">
                          <div class="bio-graph-heading">
                              今天又是美好的一天
                          </div>
                          <div id='calendar'></div>
                      </section>
                  </aside>
              </div>

              <!-- page end-->
          </section>
      </section>
      <!--main content end-->
  </section>
  <script>
  		  var events = [
  		    {
  		      id: 1001,
  		      text: '张三',
  		      title: '张三 - 早班',
  		      backgroundColor: '#3a87ad',
  		      start: '2018-02-01'
  		    },
  		    {
  		      id: 1002,
  		      text: '张三',
  		      title: '张三 - 中班',
  		      backgroundColor: '#82af6f',
  		      start: '2018-02-02',
  		      end: '2018-02-03'
  		    },
  		    {
  		      id: 1003,
  		      text: '张三',
  		      title: '张三 - 晚班',
  		      backgroundColor: '#d15b47',
  		      start: '2018-02-04'
  		    },
  		    {
  		      id: 1004,
  		      text: '张三',
  		      title: '张三 - 晚班',
  		      backgroundColor: '#d15b47',
  		      start: '2018-02-05'
  		    },
  		    {
  		      id: 1005,
  		      text: '张三',
  		      title: '张三 - 晚班',
  		      backgroundColor: '#d15b47',
  		      start: '2018-02-06'
  		    },
  		    {
  		      id: 1006,
  		      text: '张三',
  		      title: '张三 - 早班',
  		      backgroundColor: '#3a87ad',
  		      start: '2018-02-07',
  		      end: '2018-02-07'
  		    },
  		    {
  		      id: 10060,
  		      text: '张三',
  		      title: '张三 - 中班',
  		      backgroundColor: '#82af6f',
  		      start: '2018-02-07'
  		    },
  		    {
  		      id: 1007,
  		      text: '张三',
  		      title: '张三 - 中班',
  		      backgroundColor: '#82af6f',
  		      start: '2018-02-15'
  		    },
  		    {
  		      id: 1008,
  		      text: '张三',
  		      title: '张三 - 中班',
  		      backgroundColor: '#82af6f',
  		      start: '2018-02-16'
  		    },
  		    {
  		      id: 1009,
  		      text: '张三',
  		      title: '张三 - 早班',
  		      backgroundColor: '#3a87ad',
  		      start: '2018-02-17'
  		    },
  		    {
  		      id: 1010,
  		      text: '张三',
  		      title: '张三 - 早班',
  		      backgroundColor: '#3a87ad',
  		      start: '2018-02-25',
  		      end: '2018-02-25'
  		    }
  		  ];
  		
  		  $box = $('#box');
  		  $calendar = $('#calendar');
  		  $calendar.fullCalendar('destroy');
  		
  		  var calendar = $calendar.fullCalendar({
  		    header: {
  		      left: 'month,agendaWeek,agendaDay',
  		      center: '',
  		      right: 'prev,next today'
  		    },
  		    buttonText: {
  		      today: '今天'
  		    },
  		    locale: 'zh-cn',
  		    defaultView: "agendaWeek", // basicWeek listWeek agendaWeek
  		    weekMode: 'liquid',
  		    // weekNumbers: true,
  		    // height: 'auto',
  		
  		    timeFormat: 'HH:mm',
  		    defaultDate: '2018-02-24',
  		    navLinks: true,       // can click day/week names to navigate views
  		    eventLimit: 3,        // 限制一天中显示的事件数，默认false
  		    allDayText: '排班',   // 日历上显示全天的文本
  		    selectable: true,     // 允许用户通过单击或拖动选择日历中的对象，包括天和时间。
  		    selectHelper: false,  // 当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
  		    unselectAuto: true,   // 当点击页面日历以外的位置时，自动取消当前的选中状态。
  		    eventBackgroundColor: '#3a87ad',    // 设置日程事件的背景色
  		    events: events,
  		  
  		  });
  		
  		  // 添加排班
  		 
  		</script>
  

    <!-- js placed at the end of the document so the pages load faster -->
<!--    <script src="js/jquery.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="assets/jquery-knob/js/jquery.knob.js"></script>

    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>

  <script>

      //knob
      $(".knob").knob();

  </script>


  </body>
</html>
